<template>
	<div class="box3">
		<ul class="list">
			<li @click="main1">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-erji"></use>
				</svg>
				<p>首页</p>
			</li>
			<li @click="main2">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-changyongmoban"></use>
				</svg>
				<p>单据</p>
			</li>
			<li @click="part1">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-kaiguan"></use>
				</svg>
			</li>
			<li @click="part2">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-pinggu"></use>
				</svg>
				<p>统计</p>
			</li>
			<li @click="main3">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-kefu"></use>
				</svg>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
	// 只需要在通信的兄弟组件间导入bus事件总线
	import bus from"../bus.js"
	export default {
		name: "tabfixed",
		methods: {
			main1() {
				this.$router.push({
					name: "main1"
				}).catch(err=>err)
				// catch(err=>err)防止警告  增加回调
			},
			main2() {
				this.$router.push({
					name: "main2"
				}).catch(err=>err)
			},
			//显示开单选项卡
			part1(){
				bus.$emit("showmakelist",true)
			},
			//显示统计选项卡
			part2(){
				bus.$emit("showcensus",true)
			},
			main3() {
				this.$router.push({
					name: "main3"
				}).catch(err=>err)
			}
			
		}
	}
</script>

<style scoped="scoped">
	ul,li,p{
		margin:0;
		padding:0;
		list-style: none;
	}
	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.box3 {
		width: 100%;
		position: fixed;
		bottom: 0px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		background-color:white;
		padding-top:5px;
	}

	.list {
		display: flex;
	}

	.list li {
		width: 30%;
		justify-content: center;
		text-align: center;
		line-height: 20px;
	}
	.list li:nth-child(3) svg{
		font-size:2em;
	}
</style>
